<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>promise</title>
    <script src="jquery.js"></script>
</head>

<body>
    <button id="btn">播放</button>
    <p id="result"></p>

    <script>
        /*
            真正的网络请求
            $.ajax({
                url:'/api',
                success:function(res){
                    resolve(res)
                },
                error:function(){
                    reject()
                }
            })
        */

        /*
            使用setTimeout模拟网络请求
            Promise对象 
            作用：封装一个异步任务
            创建：new Promise(function(arg1,arg2)) <==> 开启一个异步任务
            参数：function //立即执行
                参数一：resolve //异步任务成功时执行
                参数二：reject  //异步任务失败时执行
        */
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                var lyric = '这里是歌词'
                // resolve(lyric) //调用resolve后才会触发then()
                reject('歌词下载失败') //调用reject后才会触发catch()
            }, 3000)
        })
        /*
            三种状态
                pending
                fulfilled
                rejected
            promise对象的状态一旦由pending变为成功或失败之后，不能再次改变
        */
        /*
            方法
            Promise.prototype 属性表示 Promise 构造器的原型.
            resolve(arg1)
                将处于pending状态的promise变为成功状态
                可以传递参数给then所设置的函数
                只能调用一次
            then(function(arg1){
                ...
            })
                为promise对象添加成功状态时的回调函数
                只能在resolve调用之后才会触发
                若为失败状态，则忽略then()

            reject(arg2)
                将处于pending状态的promise变为失败状态
            catch(function(arg2){
                ...
            })
                为promise对象添加失败状态时的回调函数
                只能在reject调用之后才会触发
                若为失败状态，则忽略then()
        */

        $('#btn').click(function () {
            // 未知状态，失败状态，成功状态
            p.then(function (l) {
                $('#result').text(l)
            })
            .catch(function (num) {
                console.log(num)
            })
        })
    </script>
</body>

</html>